<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" %>
<!DOCTYPE html>
<html>
<head>
  <title>待评教课程</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<!-- 主题切换按钮 -->
<button onclick="toggleTheme()" class="theme-toggle" style="
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 10px 15px;
    background: var(--bg-input);
    border: 1px solid var(--border-input);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
">
  🌙/☀️
</button>
<body class="container mt-4">
<div class="card shadow">
  <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
    <h4 class="mb-0">我的待评教课程</h4>
    <a href="rDBDashboard.jsp" class="btn btn-light btn-sm">
      <i class="bi bi-arrow-left"></i> 返回仪表盘
    </a>
  </div>
  <div class="card-body">
    <table class="table table-hover">
      <thead class="table-light">
      <tr>
        <th>课程名称</th>
        <th>授课学期</th>
        <th>任课教师</th>
        <th>操作</th>
      </tr>
      </thead>
      <tbody>
      <c:forEach items="${courses}" var="course">
        <tr>
          <td>${course.courseName}</td>
          <td>${course.semester}</td>
          <td>${teacherNames[course.courseId]}</td>
          <td>
            <a href="evaluation?action=view&courseId=${course.courseId}"
               class="btn btn-sm btn-success">
              <i class="bi bi-pencil-square"></i> 开始评教
            </a>
          </td>
        </tr>
      </c:forEach>
      </tbody>
    </table>
  </div>
  <div class="card mt-5 shadow">
    <div class="card-header bg-success text-white">
      <h4>我已评教课程及内容</h4>
    </div>
    <div class="card-body">
      <c:if test="${empty evaluatedCoursesWithDetails}">
        <p>暂无已评教课程。</p>
      </c:if>
      <c:forEach var="entry" items="${evaluatedCoursesWithDetails}">
        <div class="mb-4">
          <h5>${entry.key.courseName} （${entry.key.semester}）</h5>
          <p>教师：${teacherNames[entry.key.courseId]}</p>
          <table class="table table-bordered">
            <thead>
            <tr>
              <th>维度</th>
              <th>评分</th>
              <th>评论</th>
            </tr>
            </thead>
            <tbody>
            <c:forEach var="evaluation" items="${entry.value}">
              <c:forEach var="item" items="${evaluation.items}">
                <tr>
                  <td>${dimensionNames[item.dimension]}</td>
                  <td>${item.score}</td>
                  <td><c:out value="${item.comment}"/></td>
                </tr>
              </c:forEach>
            </c:forEach>
            </tbody>
          </table>
        </div>
      </c:forEach>
    </div>
  </div>

</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
<link href="./css/rDBEval_list.css" rel="stylesheet" />
<script>
  // 初始化主题
  function initTheme() {
    const savedTheme = localStorage.getItem('theme') || 'dark';
    const isLight = savedTheme === 'light';
    document.body.classList.toggle('light-mode', isLight);
    document.querySelector('.theme-toggle').textContent = isLight ? '☀️' : '🌙';
  }

  // 切换主题
  function toggleTheme() {
    const body = document.body;
    const isLight = !body.classList.contains('light-mode');
    body.classList.toggle('light-mode');
    localStorage.setItem('theme', isLight ? 'light' : 'dark');
    document.querySelector('.theme-toggle').textContent = isLight ? '☀️' : '🌙';
  }

  // 页面加载时初始化
  window.addEventListener('load', initTheme);
</script>